<template>
	<el-date-picker
		v-if="located"
		:disabled="!activate"
		:placeholder="FieldItem?.TipsText"
		start-placeholder="开始时间"
		end-placeholder="结束时间"
		v-model="componentVal"
		:value-format="valFormat"
		:style="{ width: width }"
		:type="type"
		@change="handleChange"
		data-666="666"
	>
	</el-date-picker>
	<el-time-picker
		v-else
		v-model="componentVal"
		placeholder="请选择时间"
		:format="FieldItem?.attrs.format"
		value-format="HHmmss"
		style="width: 100%"
		:is-range="FieldItem?.execTag === 'time-range'"
		:range-separator="FieldItem?.attrs['range-separator']"
		:disabled="FieldItem?.attrs.disabled"
	/>
</template>

<script setup lang="ts">
import useElement from './hooks/useElement';
import { TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';

const props = withDefaults(
	defineProps<{
		modelValue: Array<string> | string;
		FieldItem: TabFieldType | null;
		located?: string;
	}>(),
	{
		FieldItem: null,
	}
);
const { modelValue, FieldItem, located } = toRefs(props);

const componentVal = ref<string | unknown[]>([]);
const width = ref();
const emit = defineEmits(['update:modelValue']);
watch(
	modelValue,
	(newVal) => {
		componentVal.value = newVal ?? [];
	},
	{
		immediate: true,
	}
);
watch(componentVal, (newVal) => {
	emit('update:modelValue', newVal);
});

// 自定义表单 start
const state = reactive({
	activate: true,
	valFormat: 'YYYYMMDD',
	type: 'datetime',
});
const { activate, valFormat, type } = toRefs(state);
const changeTypeAndValFormat = () => {
	console.log('changeTypeAndValFormat', FieldItem.value);

	if (
		(FieldItem.value!.InputType === 'el-time' && FieldItem.value!.InputDefine && FieldItem.value!.InputDefine.filterType === 'exact') ||
		FieldItem.value!.InputType === 'systime' ||
		(FieldItem.value!.InputType === 'el-time' &&
			FieldItem.value!.InputDefine &&
			FieldItem.value!.InputDefine.filterType === 'range' &&
			located?.value !== 'Filter')
	) {
		console.log('locatedaaaaa', FieldItem.value!.InputDefine && FieldItem.value!.InputDefine.filterType === 'range' && located?.value !== 'located');
		type.value = 'datetime';
		valFormat.value = 'YYYYMMDDHHmmss';
	} else if (
		(FieldItem.value!.InputType === 'el-time' && FieldItem.value!.InputDefine && FieldItem.value!.InputDefine?.filterType === 'range') ||
		FieldItem.value!.InputType === 'el-time-range'
	) {
		type.value = 'datetimerange';
		valFormat.value = 'YYYYMMDDHHmmss';
	}
};
changeTypeAndValFormat();
const handleChange = (val: string) => {
	console.log('change', val);
	emit('update:modelValue', val);
};
const { handleStyle, handleDisable } = useElement(located, FieldItem.value!, componentVal, props);
if (FieldItem.value?.pageType && FieldItem.value.pageType === 'page') {
	activate.value = !FieldItem.value.attrs.disabled;
	width.value = '100%';
} else {
	handleDisable(activate);
	width.value = handleStyle();
}
// 自定义表单 end
</script>

<style lang="scss" scoped></style>
